<!--
 * @Author: your name
 * @Date: 2020-12-14 15:44:30
 * @LastEditTime: 2020-12-18 09:40:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \uniapp-ts-uview\src\pages\index\components\quickenter.vue
-->

<template>
  <view >
    <u-grid :col="5" :border="borders">
      <u-grid-item bg-color="#f2f2f2"  v-for="(item,index) in quickenterlist" :key="index" @click="navto(index)">
        <image
          :class="item.style+index"
          :src="item.img"
          mode="aspectFill"
        ></image>
        <view class="grid-text">{{item.title}}</view>
      </u-grid-item>
    
    </u-grid>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop,Emit} from "vue-property-decorator";
@Component({ name: "quickenter" })
export default class extends Vue {
  @Prop({type:Boolean}) private borders!:Boolean;
  @Prop() private quickenterlist!:Array<any>

 @Emit('navto')
  private navto(index:number){
      return index as number
  }
}
</script>

<style lang="scss" scoped>

.img0 {
  width: 80upx;
  height: 80upx;
}

.img1 {
  width: 80upx;
  height: 80upx;
}

.img2 {
 width: 80upx;
  height: 80upx;
}
.img3 {
   width: 80upx;
  height: 80upx;
}
.img4 {
  width: 80upx;
  height: 80upx;
}


.grid-text {
  margin-top: 12upx;
  font-size: 22upx;
}

</style>